<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="mp-search-box sp">
			<input @click="naviageToPage('/pages/product/search')" class="ser-input" type="text" value="输入关键字搜索" disabled />
			<view @click="naviageToPage('/pages/notice/notice')"><text class="icon icon-message"></text></view>
		</view>

		<!-- 头部轮播 -->
		<view class="carousel-section sp">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 背景色区域 -->
			<view class="titleNview-background"></view>
			<swiper interval="3000" duration="500" class="carousel" vertical @change="swiperChange">
				<swiper-item class="carousel-item">
					<uni-charts></uni-charts>
					<view class="btm-box">
						<view class="txt">
							实时价格<text>5524</text>
						</view>
						<view class="txt">
							今开<text>5524</text>
						</view>
						<view class="txt">
							昨收<text>5524</text>
						</view>
						<view class="txt">
							最高<text>5524</text>
						</view>
						<view class="txt">
							最低<text>5524</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{ swiperCurrent + 1 }}</text>
				<text class="sign">/</text>
				<text class="num">{{ swiperLength }}</text>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="index-box pc">
			<view class="com-box">
				<view class="left-box">
					<view class="ttl">全部产品</view>
					<uni-nav></uni-nav>
				</view>
				<view class="right-box">
					<view class="ttl">
						<navigator class="link" url="/pages/index/index" open-type="switchTab">首页</navigator>
						<navigator class="link" url="/pages/bid/list" open-type="switchTab">招采</navigator>
						<navigator class="link" url="/pages/bid/owner">招标中心</navigator>
						<navigator class="link" url="/pages/bid/old">招标记录</navigator>
						<navigator class="link" url="/pages/bid/old">过期招标</navigator>
						<navigator class="link" url="/pages/order/list">订单管理</navigator>
					</view>

					<view class="info-area">
						<view class="swiper-area">
							<swiper interval="3000" duration="500" class="carousel" circular @change="swiperChange">
								<swiper-item class="carousel-item">
									<uni-charts-candle></uni-charts-candle>
								</swiper-item>
							</swiper>
							<!-- 自定义swiper指示器 -->
							<view class="dots"><text class="dot" :class="swiperCurrent == index ? 'active' : ''" v-for="(item, index) in swiperLength"
								 :key="index"></text></view>
						</view>
						<view class="info-box">
							<view class="user-info">
								<view class="portrait-box">
									<view class="portrait">
										<image @click="toLogin" :src="userInfo.imageUrl || '/static/missing-face.png'"></image>
									</view>
									<view class="info">
										<text @click="toLogin" class="username">{{hasLogin ? userInfo.nickName || '用户' + userInfo.id : 'Hi~您好'}}</text>
										<text v-if="userInfo.phone" class="userphone">{{userInfo.phone}}</text>
										<text v-else>欢迎来到贸易平台</text>
									</view>
								</view>
								<view class="login-area" v-if="!hasLogin">
									<navigator class="link" url="/pages/public/login">请登录</navigator>
									<navigator class="link" url="/pages/public/register">请注册</navigator>
								</view>
							</view>
							<view class="msg-box">
								<view class="title">
									<text>消息</text>
									<navigator class="link" url="/pages/notice/notice">
										查看更多
										<text class="icon icon-arrow_right"></text>
									</navigator>
								</view>
								<navigator v-for="(item, index) in noticeList" :key="'notice' + index" class="notice-item" url="/pages/notice/notice">
									<text class="tip clamp">【{{item.title}}】</text>
									<text class="introduce clamp">{{item.content}}</text>
								</navigator>
								<view v-if="!noticeList[0]" style="margin: 10px;">
									暂无消息
								</view>
							</view>
							<!-- 订单 -->
							<view class="order-section">
								<view class="order-sub" @click="navTo('/pages/order/list?state=0')" hover-class="common-hover" :hover-stay-time="50">
									<text class="icon icon-order"></text>
									<text>全部订单</text>
								</view>
								<view class="order-sub" @click="navTo('/pages/order/list?state=10')" hover-class="common-hover"
								 :hover-stay-time="50">
									<text class="icon icon-pay"></text>
									<text>待付款</text>
								</view>
								<view class="order-sub" @click="navTo('/pages/order/list?state=30')" hover-class="common-hover"
								 :hover-stay-time="50">
									<text class="icon icon-fahuo"></text>
									<text>待收货</text>
								</view>
								<view class="order-sub" @click="navTo('/pages/order/list?state=60')" hover-class="common-hover"
								 :hover-stay-time="50">
									<text class="icon icon-shouhou"></text>
									<text>退款/售后</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="com-box">
				<view class="btm-box">
					<view class="txt">
						全部产品
						<text>5524</text>
					</view>
					<view class="txt">
						实时价格
						<text>5524</text>
					</view>
					<view class="txt">
						今开
						<text>5524</text>
					</view>
					<view class="txt">
						昨收
						<text>5524</text>
					</view>
					<view class="txt">
						最高
						<text>5524</text>
					</view>
					<view class="txt">
						最低
						<text>5524</text>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<!-- 分类 -->
		<view class="cate-section sp">
			<view v-for="item in cateList" :key="item.id" @click="naviageToPage('/pages/category/category?category=' + item.name)"
			 class="cate-item">
				<image :src="item.picture ? item.picture : '/static/item01.png'"></image>
				<text>{{item.name}}</text>
			</view>
		</view>

		<!-- 为您推荐 -->
		<view class="h2-index com-box">
			<text class="bd"></text>
			<text class="tit">为您推荐</text>
			<text class="bd"></text>
		</view>

		<view class="goods-list com-box">
			<view v-for="(item, index) in salesTop" :key="index" class="goods-item" @click="navToDetailPage(item.id)">
				<view class="image-wrapper">
					<image :src="item.goodsPicList[0]" mode="aspectFill" lazy-load></image>
				</view>
				<view class="text-wrapper">
					<text class="title clamp2">{{item.goodsName}}</text>
					<text class="price">￥{{isAuth ? item.price : '***'}}</text>
					<text class="size">{{item.specification}}</text>
					<view class="shop clamp">
						<image :src="item.goodsPic" mode="aspectFill"></image>
						{{item.companyName}}
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	import uniNav from '@/components/h5/uni-nav.vue'
	import uniCharts from '@/components/uni-charts/uni-charts.vue'
	import uniChartsCandle from '@/components/uni-charts/uni-charts-candle.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			uniHeader,
			uniFooter,
			uniNav,
			uniCharts,
			uniChartsCandle
		},
		data() {
			return {
				swiperCurrent: 0,
				swiperLength: 5,
				carouselList: [],
				categoryPickList: [],
				salesTop: [],
				isAuth: false,
				cateList: [],
				noticeList: []
			}
		},
		onShow() {
			this.isAuth = this.$api.isAuth()
		},
		onLoad(option) {
			this.loadData()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			loadData() {
				this.$api.request('/indexs/getGoodsListByName', {}, {
					content: 'application/x-www-form-urlencoded'
				}).then(res => {
					this.salesTop = res.data.goodsList
				})
				this.$api.request('/categoty/getOne', {}, {
					method: 'GET'
				}).then(res => {
					this.cateList = res.data
				})
				// #ifdef H5
				if (this.hasLogin) {
					this.$api.request('/zruser/messagePage', {
						type: 0,
						pageNum: 1,
						pageSize: 10
					}, {
						method: 'GET'
					}).then(res => {
						this.noticeList = res.data
					})
				}
				// #endif
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current
				this.swiperCurrent = index
			},
			toLogin() {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/profile'
					})
				}
			},
			//详情页
			navToDetailPage(id) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: `/pages/product/detail?id=${id}`
					})
				}
			},
			naviageToPage(page) {
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/public/login'
					})
				} else {
					uni.navigateTo({
						url: page
					})
				}
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/login'
				}
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.mp-search-box {
		position: absolute;
		left: 0;
		right: 0;
		top: 20upx;
		z-index: 997;
		display: flex;
		padding: 0 30upx;

		.ser-input {
			flex: 1;
			height: 60upx;
			margin-right: 20upx;
			padding: 0 20upx 0 60upx;
			font-size: $base-font-base;
			color: $base-color-base;
			line-height: 60upx;
			border-radius: 20px;
			background-color: #ffffff;
			background-image: url('');
			background-position: left 15upx center;
			background-repeat: no-repeat;
			background-size: 40upx 40upx;
		}

		.icon-message:before {
			font-size: $base-font-lg + 22upx;
			color: #fff;
		}

		.icon-message:after {
			position: absolute;
			right: -4upx;
			top: 4upx;
			font-size: $base-font-lg + 44upx;
			line-height: 0;
			color: #f00;
			content: '·';
		}

		image {
			width: 60upx;
			height: 60upx;
			vertical-align: top;
		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 20upx;
		// padding-bottom: 20upx;

		.titleNview-placing {
			height: 60upx;
			padding-bottom: 20upx;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: 0.4s;
			background-color: $base-color-page;
		}
	}

	.carousel {
		width: 100%;
		height: 750upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0;
			overflow: hidden;
			box-sizing: border-box;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}

		.btm-box {
			display: flex;
			justify-content: space-between;
			padding: 0 25upx;
			width: 100%;
			height: 120upx;

			.txt {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 18%;
				color: #fff;
				font-size: $base-font-base - 2upx;
				border-radius: 10upx;
				background-color: rgba($color: #fff, $alpha: 0.3);

				&:first-child {
					border: 0;
				}

				text {
					margin-top: 10upx;
					font-weight: normal;
				}
			}
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 20upx 22upx 30upx;
		background: #fff;

		.cate-item {
			margin-top: 20upx;
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $base-font-sm + 2upx;
			color: $base-color-dark;
		}

		image {
			width: 90upx;
			height: 90upx;
			margin-bottom: 14upx;
			border-radius: 50%;
		}
	}

	.h2-index {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100upx;
		padding: 6upx 30upx 8upx;
		color: #024ff4;
		background: #cddcff url('') no-repeat center top;
		background-size: 100% auto;

		.tit {
			padding: 0 30upx;
			font-size: $base-font-lg + 2upx;
			font-weight: bold;
			line-height: 40upx;
		}

		.bd {
			width: 100upx;
			height: 4upx;
			background-color: #024ff4;
		}
	}

	.goods-list {
		padding: 0 $base-row-spacing 20upx;
		background: #cddcff;

		.goods-item {
			background-color: #fff;

			&:first-child {
				border-radius: 20upx 20upx 0 0;
			}

			&:last-child {
				border-radius: 0 0 20upx 20upx;
			}
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.charts {
			width: 714px;
			height: 474px;
			background-color: #0251f4;
		}

		.index-box {
			.com-box {
				display: flex;
				justify-content: space-between;
				margin: 0 auto 20px;
			}

			.left-box {
				width: 200px;

				.ttl {
					height: 50px;
					line-height: 50px;
					color: #fff;
					background-color: $base-color-pc;
					text-align: center;
				}
			}

			.right-box {
				width: 980px;

				.ttl {
					display: flex;
					height: 50px;
					font-weight: bold;
					line-height: 50px;
					color: #fff;
					background-color: $base-color-pc;
					text-align: center;

					.link {
						padding: 0 25px;
					}
				}
			}
		}

		.info-area {
			display: flex;
			justify-content: space-between;
			margin-top: 20px;
		}

		.swiper-area {
			position: relative;
			width: 714px;
			height: 537px;
			overflow: hidden;
			background-color: #fff;

			.dots {
				position: absolute;
				left: 0;
				right: 0;
				z-index: 100;
				bottom: 25px;
				display: flex;
				justify-content: center;

				.dot {
					margin: 0 4px;
					width: 27px;
					height: 4px;
					border-radius: 4px;
					background-color: #999;

					&.active {
						background-color: $base-color-pc;
					}
				}
			}
		}

		.swiper-item {
			width: 714px;
			height: 474px;

			image {
				display: block;
				width: 714px;
				height: 474px;
			}
		}

		.info-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 240px;
			height: 537px;
			background-color: #fff;

			.user-info {
				flex-shrink: 0;
				padding: 20px 15px;
				border-bottom: 1px solid $base-color-light;

				.portrait-box {
					display: flex;

					image {
						display: block;
						width: 70px;
						height: 70px;
					}
				}

				.info {
					display: flex;
					justify-content: center;
					flex-direction: column;
					padding-left: 10px;
					font-size: 14px;
				}

				.username {
					display: block;
					margin-bottom: 5px;
					font-size: 16px;
				}

				.login-area {
					display: flex;
					margin-top: 20px;
					justify-content: space-between;

					.link {
						width: 100px;
						height: 30px;
						font-size: 14px;
						line-height: 28px;
						text-align: center;
						color: $base-color-pc;
						border: 1px solid $base-color-pc;

						&:hover {
							color: #fff;
							background-color: $base-color-pc;
						}
					}
				}
			}

			.msg-box {
				flex: 1;
				overflow: hidden;

				.title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 5px 10px;
					font-size: 20px;
					font-weight: bold;
					color: $base-color-dark;

					.link {
						display: flex;
						align-items: center;
						color: $base-color-light;
						font-size: 14px;
						font-weight: normal;
					}
				}

				.notice-item {
					display: flex;
					padding: 0 10px;
					font-size: 14px;
					color: $base-color-dark;
					line-height: 30px;

					.tip {
						flex-shrink: 0;
						width: 84px;
						color: $base-color-pc;
					}
				}
			}

			.order-section {
				display: flex;
				flex-wrap: wrap;
				flex-shrink: 0;
				overflow: hidden;
				height: 180px;
				border-top: 1px solid $base-color-light;

				.order-sub {
					display: flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 80px;
					height: 90px;
					font-size: 14px;
					cursor: pointer;
					border-right: 1px solid $base-color-light;
					border-bottom: 1px solid $base-color-light;

					&:nth-child(3n) {
						border-right: 0;
					}

					.icon {
						margin-bottom: 5px;
						font-size: 40px;
						color: $base-color-pc;
					}
				}
			}
		}

		.btm-box {
			display: flex;
			padding: 15px 0;
			width: 100%;
			height: 80px;
			background-color: #fff;

			.txt {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;
				color: $base-color-dark;
				font-size: 16px;
				font-weight: bold;
				text-align: center;
				border-left: 1px solid $base-color-light;

				&:first-child {
					border: 0;
				}

				text {
					font-weight: normal;
				}
			}
		}

		.h2-index {
			justify-content: flex-start;
			position: relative;
			height: 75px;
			padding: 15px 15px 15px 25px;
			color: $base-color-pc;
			line-height: 45px;
			background: #fff;

			&:before {
				position: absolute;
				left: 0;
				top: 23px;
				content: '';
				width: 10px;
				height: 30px;
				border-radius: 28px;
				background-color: $base-color-pc;
			}

			.tit {
				padding: 0;
				font-size: 26px;
				line-height: 40px;
			}

			.bd {
				display: none;
			}
		}

		.goods-list {
			margin-bottom: 20px;
			padding: 0 15px;
			background: #fff;

			.goods-item {
				margin: 0 15px 30px;
				background-color: #fff;

				&:first-child {
					border-radius: 0;
				}

				&:last-child {
					border-radius: 0;
				}
			}
		}
	}

	/* #endif */
</style>
